<template>
    <view class="container">
        <view class="header">
            <view class="avatar">
                <image  :src="card.card_logo" />
            </view>
            <view class="job">{{card.card_job}}</view>
            <view class="company">{{card.card_company}}</view>
        </view>
        
        <view class="menu">
            <!-- 除了H5其他都显示 -->
            <!-- #ifndef H5 -->
            <view class="item">
                <uv-button type="default" :plain="true" text="同步通讯录" :custom-style="syncBtn" @click="AddContact"></uv-button>
            </view>
            <view class="item">
                <uv-button type="default" :plain="true" text="分享名片" :custom-style="relayBtn" open-type="share"></uv-button>
            </view>
            <!-- #endif -->
        </view>

        <view class="info">
            <view class="title">信息</view>
            
            <view class="list">
                <view class="item">
                    <view class="content">
                        <view class="name">手机</view>
                        <view class="value">{{card.card_mobile}}</view>
                    </view>
                    <view class="icon">
                        <image src="/static/images/tel.png" />
                    </view>
                </view>
                
                <view class="item">
                    <view class="content">
                        <view class="name">邮箱</view>
                        <view class="value">{{card.card_email}}</view>
                    </view>
                    <view class="icon">
                        <image src="/static/images/email.png" />
                    </view>
                </view>
                
                <view class="item">
                    <view class="content">
                        <view class="name">地址</view>
                        <view class="value">{{card.card_address}}</view>
                    </view>
                    <view class="icon">
                        <image src="/static/images/site.png" />
                    </view>
                </view>
            </view>
        </view>
        
        <uv-toast ref="notice"></uv-toast>
    </view>
</template>

<script setup>
import { onShareAppMessage } from '@dcloudio/uni-app'

    const { proxy } = getCurrentInstance()
    
    let card = ref({})  // 公司名片
    let notice = ref()
    
    // 按钮样式
    let syncBtn = ref({
        color: 'red',
        background: 'transparent',
        width: '100%',
        border: '1px solid red',
        fontSize: '14px'
    })
    
    let relayBtn = ref({
        color: '#fff',
        background: 'red',
        width: '100%',
    })
    
    onLoad(() => GetCardInfo()) // 获取公司名片数据
    
    const GetCardInfo = async () => {
        let result = await uni.$uv.http.post('/index/CardInfo')
        
        if(result.code == 0)
        {
            notice.value.show({
                type: 'error',
                icon: false,
                message: result.msg
            })
            return false
        }
        
        card.value = result.data ?? {}
    }
    
    // 同步通讯录
    const AddContact = () => {
        uni.addPhoneContact({
            photoFilePath: card.value.card_logo,   // 头像本地文件路径
            nickName: card.value.card_nickname,  // 昵称
            firstName: card.value.card_nickname,  // 名字
            organization: card.value.card_company,  // 公司
            title: card.value.card_job,  // 职位
            mobilePhoneNumber: card.value.card_mobile,  // 微信号
            weChatNumber: card.value.card_email,  // 电子邮件
            email: card.value.card_email,  // 电子邮件
            workAddressStreet: card.value.card_address,  // 工作地址街道
            success: () => {
                notice.value.show({
                    type: 'success',
                    message: '保存通讯录成功'
                })
            },
            fail: (error) => {
                notice.value.show({
                    type: 'error',
                    icon: false,
                    message: `保存通讯录失败:${error.errMsg}`
                })
            }
        })
    }
    
    // 小程序用户右上角分享
    onShareAppMessage(() => {
        // 自定义分享界面的信息
        return {
            title: `${card.value.card_company}名片`,
            path: '/pages/card/card',
            imageUrl: card.value.card_logo
        }
    })
</script>

<style>
	page {
		background-color: #eee;
	}

	.header {
		width: 95%;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 10px;
		margin-top: 10px;
		padding: 20px 0;
		text-align: center;
		box-shadow: 0px 0px 10px 5px #dcdcdc;
	}

	.header .avatar {
		width: 80px;
		height: 80px;
		overflow: hidden;
		border-radius: 50%;
		margin: 0 auto;
	}

	.header .avatar image {
		width: 100%;
		height: 100%;
	}

	.header .name {
		margin-top: 12px;
		font-weight: bold;
		font-size: 18px;
	}

	.header .job {
		font-size: 12px;
		color: #949bae;
		margin: 10px 0;
	}

	.header .company {
		font-size: 12px;
		color: #949bae;
	}

	.header .list {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.header .list .item {
		display: flex;
		flex-direction: column;
		width: 33%;
		justify-content: center;
	}

	.header .list .item image {
		width: 25px;
		height: 25px;
		margin: 0 auto;
	}

	.header .list .item text {
		font-size: 12px;
		color: #949bae;
		margin-top: 10px;
	}

	.menu {
		width: 95%;
		margin: 20px auto 0;
		display: flex;
		justify-content: space-around;
	}
    
    .menu .item {
        width: 47%;
    }

	.info {
		width: 95%;
		margin: 20px auto 0;
		background-color: #fff;
		box-shadow: 0px 0px 10px 5px #dcdcdc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.info .list {
		margin-top: 10px;
	}

	.info .list .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
		color: #949bae;
	}


	.info .list .item .content {
		display: flex;
		font-size: 12px;
	}

	.info .list .item .name {
		display: flex;
		align-items: center;
	}

	.info .list .item .name::after {
		content: '';
		width: 1px;
		height: 10px;
		background-color: #949bae;
		display: block;
		margin: 0 5px;
	}

	.info .list .item .icon {
		width: 15px;
		height: 15px;
	}

	.info .item .icon image {
		width: 100%;
		height: 100%;
	}
</style>
